<template>
  <div style="display: flex; flex-direction: row; height: calc(100vh - 70px)">
    <div style="display: flex; flex-direction: column; height: 100%;width: 30%;">
      <div style="width: 100%; height: 50%">
      <el-card style="height: 95%;overflow: scroll;" shadow="never" class="box-card">
        <div slot="header" class="clearfix">
          <h2>影像编号：{{ form.id }}</h2>
          <el-button type="primary" @click="handleEdit">查看视频</el-button>
        </div>
        <el-descriptions class="margin-top" :column="1" :size="size" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              影像编号
            </template>
            {{ form.id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-platform"></i>
              IP地址
            </template>
            {{ form.cameraIp }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-goods"></i>
              品牌
            </template>
            {{ form.cameraBrand }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location"></i>
              位置
            </template>
            {{ form.cameraArea }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-warning-outline"></i>
              危害等级
            </template>
            {{ form.cameraLevel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-operation"></i>
              端口号
            </template>
            {{ form.cameraPort }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-tools"></i>
              型号
            </template>
            {{ form.cameraModel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-tools"></i>
              类型
            </template>
            {{ form.cameraType }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-tools"></i>
              脆弱点
            </template>
            {{ form.cameraFraPoint }}
          </el-descriptions-item>


          
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-tools"></i>
              漏洞类型
            </template>
            {{ form.cameraLoophole }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-tools"></i>
              影响范围
            </template>
            {{ form.cameraEffect }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-tools"></i>
              利用方法
            </template>
            {{ form.cameraMethod }}
          </el-descriptions-item>

          <!-- 经纬度 -->
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location"></i>
              经度
            </template>
            {{ form.cameraLon }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location"></i>
              纬度
            </template>
            {{ form.cameraLat }}
          </el-descriptions-item>

          <!-- 预览图片 -->
          <!-- <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture"></i>
              预览图片
            </template>
            <img
              style="width: 100px; height: 100px"
              :src="compUrl(form.jpgViewUrl)"
            />
          </el-descriptions-item> -->
        </el-descriptions>
      </el-card>
    </div>
    <div style="margin-top: 20px; height: 50%; overflow: scroll">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="address" label="地址" width="180">
        </el-table-column>
        <el-table-column prop="lat" label="纬度" width="180"> </el-table-column>
        <el-table-column prop="lon" label="经度"> </el-table-column>
      </el-table>
    </div>
    </diV>
    <div style="width: 70%; height: 95%">
      <!-- 上部分地图 -->
      <div style="height: 50%">
        <testMap :center="center" :height="600" ref="testMapRef" ></testMap>
      </div>
      <!-- 下部分采集的视频 -->
      <div style="height: 50%">
        <img :src="cameraViewurl" />
      </div>
    </div>
  </div>
</template>
<script>
// import testMap from "./components/Smap.vue";
import testMap from "@/components/baiduMap/index.vue";

import { getInfo, getCameraAlgorithmResult } from "@/api/system/info";
export default {
  components: {
    testMap,
  },
  data() {
    return {
      tableData: [],
      center: {
        lng: 0,
        lat: 0,
      },
      form: {},
    };
  },
  computed: {
    cameraViewurl() {
      if (!this.form.cameraViewurl) return '';
      //xx.html 替换成faststream.jpg?stream=full&fps=16&rand=676154

      let url = this.form.cameraViewurl;
      //将url中最后/之后的字符串替换为faststream.jpg?stream=full&fps=16&rand=676154
      url = url.replace(/\/[^/]+$/, '/faststream.jpg?stream=full&fps=16&rand=676154');
      return url;
      
    },
  },
  mounted() {

    
    //从地址获取ID
    const id = this.$route.query.id;
    //调用查询详情的接口
    getInfo(id).then((res) => {
      if (res.code == 200) {
        this.form = res.data;
        this.center.lng = res.data.cameraLon;
        this.center.lat = res.data.cameraLat;
        this.$refs.testMapRef.setData({
        // this.tableData
        points: [{
          lng: res.data.cameraLon,
          lat: res.data.cameraLat,
          ...res.data,
        }]
      });
      } else {
        this.$message.error("获取用户数据失败！");
        this.form = {};
      }
    });
    getCameraAlgorithmResult(id).then((res) => {
      console.log("111111111111111111111");
      if (res.code == 200 && res.data.length > 0) {

        // debugger;
        // this.center.lng = res.data[1].lon;
        // this.center.lat = res.data[1].lat;
        this.tableData = res.data;
      }else{
        //中心点定位到北京
        // this.center.lng = 116.405285;
        // this.center.lat = 39.904989;
        this.tableData = [];
      }
    });
    console.log('sssssss',this.center);
    setTimeout(() => {
      if(this.tableData.length > 0){
        this.$refs.testMapRef.setData({
        // this.tableData
        points: this.tableData.map((item) => ({
          lng: item.lon,
          lat: item.lat,
          ...item,
        })),
      });
      }
     
    }, 1000);
  },

  methods: {
    handleEdit(){
     //新打开一个窗口 地址是form.cameraViewurl
     window.open(this.form.cameraViewurl, '_blank');
    },
    compUrl(url) {
      return `http://192.168.101.7:8888${url}`;
    },
  },
};
</script>
